<template>
    <div>
      <div>
        <list-header></list-header>
      </div>
      <div class="container">
        <div class="content">
          <div class="wrapper">
            <div class="main">
              <p class="update-time">time<span class="has-fresh-text">已更新</span></p>
              <p class="board-content">榜单规则：将昨日国内待映影片，按照之前30天的想看数总量从高到低排列取前50名，每天上午10点更新。相关数据来源于“猫眼电影库”。</p>
              <ul class="board-wrapper" v-for="movice in mostExpectMovices" :key="movice.filmId">
                <li>
                  <!--<span class="board-index"></span>-->
                  <!--<router-link>-->
                  <a href="" class="image-link">
                    <img
                      src="https://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/image/loading_2.e3d934bf.png"
                      alt="" class="poster-default">
                    <img :src="movice.cover" alt="" class="board-img">
                  </a>
                  <!--</router-link>-->
                  <div class="board-item-main">
                    <div class="board-item-content">
                      <div class="movie-item-info">
                        <p class="name">
                          <a href="">{{movice.filmName}}</a>
                        </p>
                        <p class="releasetime">上映时间：{{movice.time}}</p>
                      </div>
                      <div class="movie-item-number wish">
                        <p class="month-wish"> 本月想看：<span><span class="stonefont">{{movice.wish}}</span></span>人</p>
<!--                        <p class="total-wish">总想看：<span><span class="stonefont"></span></span>人</p>-->
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="pager-main"></div>
          </div>
        </div>
      </div>
    </div>

</template>

<script>
  import axios from 'axios/index'
  import ListHeader from '@/components/The_list/components/ListHeader'
    export default {
      name: "MostExpectMovicesList",
      components:{
        ListHeader
      },
      data(){
        return{
          mostExpectMovices:[]
        }
      },
      methods:{
        getMostExpectMoviesList(){
          axios.get('api/listWishFilm.json')
            .then(this.getDetail)
            .catch(function (error) {
              console.log(error);
            });
        },
        getDetail(response){
          console.log(response.data);
          this.mostExpectMovices = response.data
        }
      },
      mounted() {
        this.getMostExpectMoviesList()
      }
    }
</script>

<style lang="css" scoped>
.container {
  width: 1200px;
  margin: 0 auto;
}
div {
  display: block;
}
.wrapper {
  overflow: hidden;
}
.main {
  width: 950px;
  margin: 0 auto;
  margin-top: 70px;
}
.update-time {
  text-align: center;
  font-size: 12px;
  color: #999;
}
.has-fresh-text {
  color: #ffb400;
  margin-left: 4px;
}
.board-content {
  margin-top: 6px;
  color: #999;
  text-align: center;
  font-size: 12px;
}
.board-wrapper {
  margin-top: 40px;
}
li{
  margin-bottom: 30px;
  font-size: 0;
  position: relative;
  overflow: hidden;
}
.board-index {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #f7f7f7;
  font-size: 18px;
  color: #999;
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 85px;
}
.image-link {
  display: inline-block;
  width: 160px;
  height: 210px;
  margin-left: 80px;
  margin-bottom: 20px;
  position: relative;
  float: left;
}
.poster-default {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 62px;
  margin-left: -34px;
  margin-top: -31px;
}
.board-img {
  vertical-align: middle;
  position: absolute;
  left: 0;
  top: 0;
  width: 160px;
  height: 220px;
}
.board-item-main {
  display: inline-block;
  width: 680px;
  margin-left: 30px;
  height: 219px;
  float: right;
  line-height: 219px;
  border-bottom: 1px solid #e5e5e5;
}
.board-item-content {
  display: inline-block;
  vertical-align: middle;
  width: 680px;
  font-size: 0;
  line-height: 1;
}
.movie-item-info {
  font-size: 16px;
  display: inline-block;
  width: 420px;
  vertical-align: middle;
}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.name a {
  font-size: 26px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 420px;
  display: block;
}
.star {
  margin-top: 18px;
  color: #333;
}
.releasetime {
  margin-top: 8px;
  color: #999;
}
.movie-item-number {
  display: inline-block;
  text-align: right;
  width: 260px;
  vertical-align: top;
  margin-top: 10px;
  font-size: 16px;
}
.month-wish {
  font-size: 16px;
  color: #ffb400;
}
.month-wish span {
  font-size: 26px;
  font-weight: 700;
}
.total-wish {
  margin-top: 8px;
  font-size: 16px;
  color: #999;
}
.total-wish {
  margin-top: 8px;
  font-size: 16px;
  color: #999;
}
.score-num .score {
  padding-right: 4px;
}
a{
  text-decoration: none;
  color: #1a1a1a;
}
dd, dl, h4, li, p, ul {
  padding: 0;
  margin: 0;
}
</style>
